<template>
  <el-form ref="LoginFormRef" :model="Form" :rules="Rules" class="loginForm">
    <el-form-item prop="username">
      <el-input type="text" v-model="Form.username" placeholder="请输入用户名" :prefix-icon="Avatar">
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="Form.password" placeholder="请输入用户密码" :prefix-icon="Lock"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="login">
        登陆
      </el-button>
      <el-button type="info" @click="resetForm">
        取消
      </el-button>
    </el-form-item>

  </el-form>
</template>

<script lang="ts">
import {defineComponent, reactive, ref} from "vue";
import { Avatar,Lock } from "@element-plus/icons";
import LoginRequest from "@/utils/login";
import route from "@/router";
import {ElMessage} from "element-plus";

export default defineComponent({
  name: "Login",
  setup(){
    const Form = reactive({
      username:"",
      password:""
    })
    const Rules = {
      username: [
        {
          required: true,
          message: '请输入用户名',
          trigger: 'blur',
        },
        {
          min: 3,
          max: 10,
          message: '用户名长度在3-10个字符之间',
          trigger: 'blur',
        },
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur',
        },
        {
          min: 6,
          max: 20,
          message: '密码长度在6-20个字符之间',
          trigger: 'blur',
        },
      ],
    }
    const LoginFormRef = ref(null)
    const login = () => {
      LoginFormRef.value.validate( async(valid: boolean) => {
        if (valid) {
          const blog = await LoginRequest.doLogin(LoginRequest.AdminName, Form.username, Form.password)
          console.log(blog,"请求结果")
          if (blog) route.push({path:'/',})
        } else {
          ElMessage.error('请输入正确信息后提交');
        }
      })
    }
    const resetForm = () => {
      LoginFormRef.value.resetFields()
    }
    const toRegister = () => {
      route.push({path:"/Login/Register"})
    }

    return {
      Form,
      Rules,
      LoginFormRef,
      login,
      resetForm,
      Avatar,
      Lock,
      toRegister
    }
  }
})
</script>

<style scoped>
.loginForm {
}

</style>